<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>手机通讯录</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
.container { max-width: 500px; margin: 0 auto; }
.form-group { margin-bottom: 10px; }
input, textarea { width: 100%; padding: 8px; margin: 5px 0; }
button { padding: 8px 15px; margin-right: 10px; }
#contactsList { height: 200px; resize: vertical; }
</style>
</head>
<body>
<div class="container">
<h2>手机通讯录管理器</h2>
<div class="form-group">
<label>姓名：</label>
<input type="text" id="nameInput">
</div>
<div class="form-group">
<label>电话：</label>
<input type="text" id="phoneInput">
</div>
<div class="buttons">
<button id="addBtn">添加</button>
<button id="searchBtn">查询</button>
<button id="deleteBtn">删除</button>
<button id="resetBtn">重置</button>
</div>
<textarea id="contactsList" readonly></textarea>
</div>

<script src="5.js"></script>
</body>
</html>